<template>
  <div class="programManagement">
    <el-row :style="{paddingBottom: 0}">
      <el-col>
        <dynForm :info-form="infoForm" :search-tags="searchTags" :select-list="selectList">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="doSearch">
            {{ $t("search") }}
          </el-button>
        </dynForm>
      </el-col>
    </el-row>
    <el-card shadow="never">
      <el-row :gutter="6">
        <el-col :span="6">
          <el-card shadow="never" class="test-filter">
            <el-input
              v-model="filterText"
              placeholder="输入关键字进行过滤"
            />
            <el-tree
              ref="tree"
              :data="treeList"
              :props="defaultProps"
              :filter-node-method="filterNode"
              accordion
            >
              <span slot-scope="{ node, data }" class="custom-tree-node">
                <span @click="doSomeThing(node, data)">{{
                  data.categoryName
                }}</span>
              </span>
            </el-tree>
          </el-card>
        </el-col>
        <el-col :span="18">
          <el-row>
            <el-col :span="24">
              <div class="btn-box">
                <el-button
                  type="primary"
                  icon="el-icon-plus"
                  @click="openDialog('新增')"
                >上传</el-button
                >
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  @click="openDialog('修改')"
                >更新</el-button
                >
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                >{{ $t("delete") }}</el-button
                >
              </div>
            </el-col>
          </el-row>
          <dynTable
            ref="dynTable"
            :loading="tableLoading"
            :table-data="tableData"
            :table-columns="tableColumns"
            :handle-selection-change="handleSelectionChange"
            :row-click="rowClick"
          />
        </el-col>
      </el-row>
    </el-card>
    <uploadForm ref="uploadForm" :title="dialogTitle" />
  </div>
</template>

<script>
import programManagementApi from '@/api/testprogram/programManagement'
import mySetting from '@/mixins/mySetting'
import networkTips from '@/mixins/networkTips'
import uploadForm from './components/dialogForm'
export default {
  name: 'ProgramManagement',
  components: { uploadForm },
  mixins: [mySetting, networkTips],
  props: {},
  data() {
    return {
      infoForm: {},
      selectList: {},
      searchTags: [
        {
          label: '程序名',
          prop: 'formName',
          tag: 'DynSelect'
        }
      ],
      filterText: '',
      treeList: [],
      defaultProps: {
        children: 'children',
        label: 'categoryName'
      },
      tableLoading: false,
      tableColumns: [
        { prop: '', label: '', type: 'selection' },
        { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: (_scope) => {
          return (
            <span>{ (this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
          )
        } },
        { prop: 'documentFolder', label: '文件夹', width: '180px' },
        { prop: 'documentName', label: '测试机程序', width: '150px' },
        { prop: 'document_Inner_Path', label: 'FTP路径', width: '200px' },
        { prop: 'documentVer', label: '版本', width: '120px' },
        { prop: 'creator', label: '创建者' },
        { prop: 'createTime', label: '创建时间', width: '180px' },
        { prop: 'editor', label: '编辑者' },
        { prop: 'editTime', label: '编辑时间', width: '180px' }
      ],
      dialogTitle: ''
    }
  },
  computed: {},
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getDocumentNameList()
    this.getTreeList()
  },
  mounted() {},
  methods: {
    // 获取程序名
    async getDocumentNameList() {
      const res = await programManagementApi.getDocumentNameList()
      this.$set(this.selectList, 'formName', res.data)
    },
    // 左侧树状结构
    async getTreeList() {
      const res = await programManagementApi.getTreeList()
      this.treeList = this.dataTree(res.data)
    },
    openDialog(val) {
      this.dialogTitle = val
      this.$refs.uploadForm.openDialog()
    },
    async doSomeThing(node, data) {
      if (node.childNodes.length === 0) {
        const res = await programManagementApi.getTableList({
          categoryId: data.id,
          ...this.listQuery
        })
        this.tableData = res.data
      }
    },
    filterNode(value, data) {
      // if (!value) return true;
      // return data.label.indexOf(value) !== -1;
    },
    // 数据->tree
    dataTree(list) {
      const parents = list.filter((ele) => !ele.parentCategoryID)
      const children = list.filter((ele) => ele.parentCategoryID)
      filterList(parents, children)
      function filterList(parents, children) {
        parents.map((p) => {
          children.map((c, index) => {
            if (p.id === c.parentCategoryID) {
              const _c = JSON.parse(JSON.stringify(children))
              _c.splice(index, 1)
              filterList([c], _c)
              if (p.children) {
                p.children.push(c)
              } else {
                p.children = [c]
              }
            }
          })
        })
      }
      return parents
    },
    handleSelectionChange(row) {
      this.multipleSelection = row
    },
    rowClick(row) {
      this.$refs.dynTable.$refs.multipleTable.toggleRowSelection(row)
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/styles/defaultStyle.scss";
.el-form-item {
  margin-bottom: 16px;
}
.programManagement {
  height: calc(100vh - 86px);
  .el-row:nth-child(1) {
    padding-bottom: 0;
  }
  .el-card{
    height: calc(100% - 60px);
    box-sizing: border-box;
    padding: 0 20px;
  }
}
.btn-box {
  margin-bottom: 10px;
}
.el-card.test-filter{
  padding-top: 6px;
  .el-input {
    width: 100%;
  }
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
  span{
    width: 100%;
    height: 100%;
  }
}
</style>
